<template>
  <div class="api">
    <div class="flex-row-between flex-row-center">
      <div class="api-name">{{ api.name }}</div>
      <div class="action">
        <!-- <span>调试</span> -->
        <span class="btn-text" @click="$emit('design')">调试/编辑</span>
      </div>
    </div>
    <div class="api-view" :class="className">
      <div class="api-head flex-row-between flex-row-center">
        <div class="api-name flex-row-center">
          <div class="api-method">
            <select class="method" v-model="api.method">
              <option value="get">get</option>
              <option value="post">post</option>
              <option value="put">put</option>
              <option value="head">head</option>
              <option value="delete">delete</option>
            </select>
            <!-- {{api.method}}  -->
          </div>
          <div class="api-base">
            <!-- <div class="name">{{api.name}}</div> -->
            <div class="url">{{ api.url }}</div>
          </div>
        </div>
        <div class="action">
          <!-- <span>调试</span> -->
          <!-- <span>删除</span> -->
          <Icon
            class="icon-gray icon-small click"
            type="close"
            @click="$emit('remove', api)"
          />
        </div>
      </div>
      <div class="api-param flex-row">
        <div class="view-half flex-column">
          <!-- <div class="flex-row-center view-head">
            <span class="label-auto flex-row-center">
              <Icon class="icon-tips" type="note" />请求参数
            </span>
          </div> -->
          <!-- <DivEdit
            class
            v-model="api.param"
            placeholder="输入请求参数描述"
            maxlength="12040"
          ></DivEdit> -->
          <IDE class="" :value="api.param" />
        </div>
        <div class="view-half flex-column">
          <!-- <div class="flex-row-center view-head">
            <Icon class="icon-tips" type="note" />返回参数
          </div> -->
          <DivEdit
            class
            v-model="api.result"
            placeholder="输入返回参数描述"
            maxlength="12040"
          />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import ApiDebug from "./ApiDebug";
let components = { ApiDebug };
export default {
  components,
  props: { api: {} },
  data() {
    return {
      visibleDesc: false,
      apiDebug: null,
      doc: {},
    };
  },
  watch: {
    api() {},
  },
  computed: {
    className() {
      let api = this.api || {};
      let types = {
        get: "method-get",
        post: "method-post",
        put: "method-put",
        delete: "method-delete",
        head: "method-head",
      };
      return types[api.method] || "";
    },
  },
  mounted() {},
  methods: {
    setDoc() {
      let docBase = {
        name: "接口文档",
        baseURL: "/api",
        version: "1.0",
        desc: "没有描述",
        author: "匿名",
        createTime: this.$util.dateFormat(),
        list: [],
      };
      this.doc = Object.assign({}, docBase, this.apiDoc);
    },
    setDebugVisible() {
      this.apiDebug = this.apiDebug ? null : this.apiData;
    },
    paramFormat(key) {
      if (this.api[key] && this.api[key].indexOf("{") >= 0) {
        try {
          try {
            let obj = JSON.parse(this.api[key]);
            this.api[key] = JSON.stringify(obj, null, 1);
          } catch (error) {
            window.eval("window.paramEval=" + this.api[key]);
            this.api[key] = JSON.stringify(window.paramEval, null, 1);
          }
        } catch (error) {
          window.alert(
            `仅支持Json,Object类型的参数格式化\n异常详情:\n` + error.message
          );
        }
      }
    },
  },
};
</script>
<style>
.api-view {
  /* background-image: url(~@/../public/logo.svg); */
  border: 1px solid var(--color-back-head);
  border-radius: 2px;
  transition: 0.5s;
}
.api-view:hover {
  box-shadow: 5px 5px 7px #dddd;
}
.api-head {
  background-color: var(--color-back-title);
}
.api-method {
  height: 35px;
  line-height: 35px;
  margin: 0px 0;
  border-right: 1px solid#EBEEF5;
}
.api-method select {
  /* font-weight  :bold ; */
  font-size: 1rem;
  /* color: #eee; */
  width: 60px;
  appearance: none;
  text-align: center;
  text-align-last: center;
  border: 0;
}

.method-put .api-head,
.method-put .api-method select {
  color: #10a54a;
}

.api-name .api-base {
  padding: 5px 10px;
  line-height: 1;
}
.api-name .name {
}
.api-name .url {
  font-size: 0.9rem;
}
.api-head .action {
  /* margin-right: 7px; */
}

/* ====== */

.api-param {
  /* border: 1px solid #ddd7; */
  /* border-radius: 1px; */
  /* margin: 10px; */
}

.api-param .view-head {
  padding: 5px 10px;
  background-color: #f9f9f9;
}
.api-param .view-half:nth-child(1) {
  border-right: 1px solid var(--color-back-head);
}
.view-half {
  position: relative;
  width: 50%;
}
.view-half::before {
  /* content: "请求参数"; */
  position: absolute;
  left: 2px;
  top: 2px;
  font-size: 0.6rem;
  opacity: 0.5;
  color: #999;
}

.api-param .edit-div {
  flex-grow: 1;
  min-height: 40px;
  max-height: 200px;
  padding: 10px 10px;
  overflow: hidden;
  font-size: 0.9rem;
  transition: 0.3s;
  /* text-overflow: ellipsis;
  display: -webkit-box;
  line-height: 1.4;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical; */
}
.api-param .edit-div:focus {
  overflow: auto;
  max-height: 200px;
  /* text-overflow: unset;
  display: block;
  -webkit-line-clamp: unset;
  -webkit-box-orient: unset; */
}
</style>
